Sourced from react-router's releases.

[email protected]

What's Changed

We recently published a post over on the Remix Blog titled "Future Proofing Your Remix App" that goes through our strategy to ensure smooth upgrades for your Remix and React Router apps going forward. React Router 6.10.0 adds support for these flags (for data routers) which you can specify when you create your router:

const router = createBrowserRouter(routes, {
  future: {
    // specify future flags here
  },
});

You can also check out the docs here and here.

Minor Changes

• The first future flag being introduced is future.v7_normalizeFormMethod which will normalize the exposed useNavigation()/useFetcher() formMethod fields as uppercase HTTP methods to align with the fetch() (and some Remix) behavior. (#10207)

  • When future.v7_normalizeFormMethod is unspecified or set to false (default v6 behavior),
    • useNavigation().formMethod is lowercase
    • useFetcher().formMethod is lowercase
  • When future.v7_normalizeFormMethod === true:
    • useNavigation().formMethod is UPPERCASE
    • useFetcher().formMethod is UPPERCASE

Patch Changes

• Fix createStaticHandler to also check for ErrorBoundary on routes in addition to errorElement (#10190)
• Fix route ID generation when using Fragments in createRoutesFromElements (#10193)
• Provide fetcher submission to shouldRevalidate if the fetcher action redirects (#10208)
• Properly handle lazy() errors during router initialization (#10201)
• Remove instanceof check for DeferredData to be resilient to ESM/CJS boundaries in SSR bundling scenarios (#10247)
• Update to latest @remix-run/[email protected] (#10216)

Full Changelog: https://github.com/remix-run/react-router/compare/[email protected]@6.10.0

v6.9.0

What's Changed

Minor Changes

• React Router now supports an alternative way to define your route element and errorElement fields as React Components instead of React Elements. You can instead pass a React Component to the new Component and ErrorBoundary fields if you choose. There is no functional difference between the two, so use whichever approach you prefer 😀. You shouldn't be defining both, but if you do Component/ErrorBoundary will "win". (#10045)

  Example JSON Syntax

  // Both of these work the same:
  const elementRoutes = [{

... (truncated)

Sourced from react-router's changelog.

6.10.0

Minor Changes

• Added support for Future Flags in React Router. The first flag being introduced is future.v7_normalizeFormMethod which will normalize the exposed useNavigation()/useFetcher() formMethod fields as uppercase HTTP methods to align with the fetch() behavior. (#10207)

  • When future.v7_normalizeFormMethod === false (default v6 behavior),
    • useNavigation().formMethod is lowercase
    • useFetcher().formMethod is lowercase
  • When future.v7_normalizeFormMethod === true:
    • useNavigation().formMethod is uppercase
    • useFetcher().formMethod is uppercase

Patch Changes

• Fix route ID generation when using Fragments in createRoutesFromElements (#10193)
• Updated dependencies:
  • @remix-run/[email protected]

6.9.0

Minor Changes

• React Router now supports an alternative way to define your route element and errorElement fields as React Components instead of React Elements. You can instead pass a React Component to the new Component and ErrorBoundary fields if you choose. There is no functional difference between the two, so use whichever approach you prefer 😀. You shouldn't be defining both, but if you do Component/ErrorBoundary will "win". (#10045)

  Example JSON Syntax

  // Both of these work the same:
  const elementRoutes = [{
    path: '/',
    element: <Home />,
    errorElement: <HomeError />,
  }]
  const componentRoutes = [{
  path: '/',
  Component: Home,
  ErrorBoundary: HomeError,
  }]
  function Home() { ... }
  function HomeError() { ... }

  Example JSX Syntax

  // Both of these work the same:
  const elementRoutes = createRoutesFromElements(

... (truncated)

• a3927fe chore: Update version for release (#10284)
• 8f7939c chore: Update version for release (pre) (#10260)
• 7799f6c chore: Update version for release (pre) (#10248)
• 97b5c42 chore: Update version for release (pre) (#10243)
• 5bfffa8 Merge branch 'main' into release-next
• dff7e64 Add future.v7_normalizeFormMethod flag (#10207)
• af4b07d Fix route ID generation when using Fragments in createRoutesFromElements (#10...
• 28bdebf Convert data-memory-router-tests to use createMemoryRouter directly (#10188)
• 40d49e1 Fix links in changelogs to point to PRs
• 4ec107a chore: Update version for release (#10185)
• Additional commits viewable in compare view

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)